<template>
	<view class="content display displayColumn width_750 ">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23" @click="back"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">明细详情</text>
			</template>
		</u-navbar>
		
		<view class="fn_content display  width_750 all_item displayColumn fontSize font_comm">
			<view class="fn_onelogo display  displayColumn M-T60">
				<image class="image" :src="img" mode=""></image>
				<span class="fn_ttx1 M-T20">摩卡兄弟</span>
				<span class="fn_ttx2 M-T20">-{{info.payCash}}</span>
			</view>
			<view class="fn_two display displayColumn width_699  M-T60">
				<view class="fn_two_item display width-100  M-T24">
					<span class="fn_ttx3 M-L24">支付状态</span>
					<span class="fn_ttx4 M-R24">{{info.payStatus}}</span>
				</view>
				<view class="fn_two_item display width-100  M-T24">
					<span class="fn_ttx3 M-L24">支付时间</span>
					<span class="fn_ttx4 M-R24">{{info.createTime}}</span>
				</view>
				<view class="fn_two_item display width-100  M-T24">
					<span class="fn_ttx3 M-L24">商品名称</span>
					<span class="fn_ttx4 M-R24">{{info.goodsName}}</span>
				</view>
				<view class="fn_two_item display width-100  M-T24">
					<span class="fn_ttx3 M-L24">支付方式</span>
					<span class="fn_ttx4 M-R24">{{info.payType}}</span>
				</view>
				<view class="fn_two_item display width-100  M-T24">
					<span class="fn_ttx3 M-L24">交易单号</span>
					<span class="fn_ttx4 M-R24">{{info.transactionId}}</span>
				</view>
			</view>
			
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{},
				id:'',
				img:this.$imgUrls + '7a032f7d44bf404bbce348fab6c60ced.jpg'
			}
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id;
			// 请求接口
			this.$modal.loading('加载中');
			this.getDetails();
		},
		methods: {
			getDetails(){
				
				this.$req.get(`/xcx/userPayLog/${this.id}`).then(res=>{
					this.$modal.closeLoading()
					console.log(res)
					this.info = res.data.data
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.title {
		font-weight: 600;
		font-size: 34rpx;
		color: #232323;
	}
	.image{
		width: 100rpx;
		height: 100rpx;
	}
	.fn_ttx1{
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}
	.fn_ttx2{
		font-weight: 600;
		font-size: 40rpx;
		color: #000000;
	}
	.fn_two{
		height: 1132rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.fn_two_item{
		justify-content: space-between;
	}
	.fn_ttx3{
		font-weight: 400;
		font-size: 28rpx;
		color: #72778A;
	}
	.fn_ttx4{
		font-weight: 600;
		font-size: 28rpx;
		color: #212121
	}
</style>
